<template>
    <div>
      <!-- 文章主体部分 -->
      <!-- 第一种多图模板 -->
      <div class="post-item-multip" 
      v-for="(item,index) in postLists"
      :key="index"
      v-if="item.images.length==3">
      <nuxt-link :to="`/post/detail?id=${item.id}`">
        <h4><a>{{item.title}}</a></h4>
        <p>{{item.summary}}</p>
      </nuxt-link>  
        <div class="pic">
          <a>
            <img :src="item.images[0]" alt="">
          </a>
          <a>
            <img :src="item.images[1]" alt="">
          </a>
          <a>
            <img :src="item.images[2]" alt="">
          </a>
        </div>
        <div class="icon">
            <div class="icon-left">
              <span><i class="el-icon-location-outline"></i>{{item.cityName}}</span>
              <a href="#">by <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt=""></a>
              <a href="#">地球发动机</a>
              <span v-if="item.watch == null"><i class="el-icon-view">0</i></span>
              <span v-else><i class="el-icon-view">{{item.watch}}</i></span>
            </div>
            <span class="like" v-if="item.like == null">0赞</span>
            <span class="like" v-else>{{item.like}}赞</span>
        </div>
      </div>
      <!-- 单图模板 -->
      <div class="post-item-single" 
      v-for="(item,index) in postLists"
      :key="index"
      v-if="item.images.length>0&&item.images.length<3">
        <div class="pic">
          <a>
            <img :src="item.images[0]" alt="">
          </a>
        </div>
        <div class="post-content">
          <nuxt-link :to="`/post/detail?id=${item.id}`">
          <h4><a>{{item.title}}</a></h4>
          <p>{{item.summary}}</p>
          </nuxt-link>
          <div class="icon">
            <div class="icon-left">
              <span><i class="el-icon-location-outline"></i>{{item.cityName}}</span>
              <a href="#">by <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt=""></a>
              <a href="#">地球发动机</a>
              <span v-if="item.watch == null"><i class="el-icon-view">0</i></span>
              <span v-else><i class="el-icon-view">{{item.watch}}</i></span>
            </div>
            <span class="like" v-if="item.like == null">0赞</span>
            <span class="like" v-else>{{item.like}}赞</span>
          </div>
        </div>
      </div>

      <!-- 没有图片的情况  -->
      <div class="none-pic"
      v-for="(item,index) in postLists"
      :key="index"
      v-if="item.images.length ==0">
      <nuxt-link :to="`/post/detail?id=${item.id}`">
        <h4><a>{{item.title}}</a></h4>
        <p>{{item.summary}}</p>
      </nuxt-link>
        <div class="icon">
            <div class="icon-left">
              <span><i class="el-icon-location-outline"></i>{{item.cityName}}</span>
              <a href="#">by <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt=""></a>
              <a href="#">地球发动机</a>
              <span v-if="item.watch == null"><i class="el-icon-view">0</i></span>
              <span v-else><i class="el-icon-view">{{item.watch}}</i></span>
            </div>
            <span class="like" v-if="item.like == null">0赞</span>
            <span class="like" v-else>{{item.like}}赞</span>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    props:{
        postLists: {
            type: Array,
            // 默认是空数组
            default: []
        }
    },
    mounted(){
        
    }
}
</script>

<style lang="less" scoped>
.post-item-multip {
      padding: 20px 0;
      width: 700px;
      border-bottom: 1px solid #ccc;
       h4 >a {
        height: 40px;
        line-height: 40px;
        font-weight: 400;
        font-size: 18px;
        
      }
      p {
         margin-top: 10px;
        margin-bottom: 15px;
        line-height: 1.5;
        font-size: 14px;
        height: 63px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
      }
      img {
        width: 220px;
        height: 150px;
      }
      .icon{
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10px;
              .icon-left{
              font-size: 12px;
              color: #999;
              span{
                margin-right: 10px;
              }
              
              img{
                width: 16px;
                height: 16px;
                border-radius: 8px;
                vertical-align: middle;
              }
          }
          .like{
            font-size: 18px;
            color: orange;
          }
      }
}
.post-item-single{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 700px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    .pic{
      margin-right:10px;
      img{
        width: 220px;
        height: 150px;
      }
    }
    .post-content{
        width: 500px;
        h4 >a{
            font-weight: 400;
            font-size: 18px;
        }
        p{  
            margin-top: 10px;
            margin-bottom: 15px;
            line-height: 1.5;
            font-size: 14px;
            height: 63px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
        }
        .icon{
              display: flex;
              justify-content: space-between;
              align-items: center;
              .icon-left{
              font-size: 12px;
              color: #999;
              span{
                margin-right: 10px;
              }
              
              img{
                width: 16px;
                height: 16px;
                border-radius: 8px;
                vertical-align: middle;
              }
          }
          .like{
            font-size: 18px;
            color: orange;
          }
      }
    }      
}
.none-pic{
  padding: 20px 0;
      width: 700px;
      border-bottom: 1px solid #ccc;
      h4 >a {
        height: 40px;
        line-height: 40px;
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 10px;
      }
      p {
         margin-top: 10px;
        margin-bottom: 15px;
        line-height: 1.5;
        font-size: 14px;
        height: 63px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
      }
      .icon{
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10px;
              .icon-left{
              font-size: 12px;
              color: #999;
              span{
                margin-right: 10px;
              }
              
              img{
                width: 16px;
                height: 16px;
                border-radius: 8px;
                vertical-align: middle;
              }
          }
          .like{
            font-size: 18px;
            color: orange;
          }
      }
}
</style>